<template>
	<view>
		<topic-info :info="info"></topic-info>
		<divider></divider>
		<view class="p-2 flex align-cente border-bottom" hover-class="bg-light" v-for="(item,index) in hotList" :key="index">
			<text class="iconfont icon-xihuan " style="color: #FF3333;"></text>
			<text class="font text-dark text-ellipsis">
				{{item.title}}
			</text>
		</view>
		<divider></divider>
		
		<!-- tab -->
		<view class="flex align-cente py-2">
			<view class="flex-1 font-md flex align-center justify-center "  v-for="(item,index) in tabBars" :key="index" :class="index===tabIndex ? 'font-lg font-weight-bold text-main':'font-md'" @click="changeTab(index)">
				{{item.name}}
			</view>
		</view>
		<!-- 列表 -->
		<template v-if="listData.length >0">
			<block v-for="(item,index) in  listData" :key="index">
				<common-list :item="item" :index="index"></common-list>
				<divider></divider>
			</block>
		</template>
		<template v-else>
			<no-thing></no-thing>
		</template>
		<!-- 上拉加载 -->
		<load-more :loadmore="loadtext"></load-more>
	</view>
</template>

<script>
	const demo=[{
									username:"昵称",
									userpic:"../../static/tabber/default.jpg",
									newstime:"2021-12-1 15:30",
									isFollow:false,
									title:"我是标题",
									titlepic:"../../static/demo/datapic/12.jpg",
									support:{
										type:"unsupport",
										support_count:1,
										unsupport_count:2
									},
								    comment_count:2,
									share_num:2
								},
								{
									username:"昵称",
									userpic:"../../static/tabber/default.jpg",
									newstime:"2021-12-1 15:30",
									isFollow:false,
									title:"我是标题",
									titlepic:"",
									support:{
										type:"support",
										support_count:1,
										unsupport_count:2
									},
								    comment_count:2,
									share_num:2
								},
								{
									username:"昵称",
									userpic:"../../static/tabber/default.jpg",
									newstime:"2021-12-1 15:30",
									isFollow:false,
									title:"我是标题",
									titlepic:"../../static/demo/datapic/15.jpg",
									support:{
										type:"",
										support_count:1,
										unsupport_count:2
									},
								    comment_count:2,
									share_num:2
								},
								{
									username:"昵称",
									userpic:"../../static/tabber/default.jpg",
									newstime:"2021-12-1 15:30",
									isFollow:false,
									title:"我是标题",
									titlepic:"../../static/demo/datapic/13.jpg",
									support:{
										type:"support",
										support_count:1,
										unsupport_count:2
									},
								    comment_count:2,
									share_num:2
								}]
	import topicInfo from'@/components/topic-detail/topic-info.vue'
	import commonList from'@/components/common/common-list.vue'
	import noThing from'@/components/common/no-thing.vue'
	import loadMore from'@/components/common/load-more.vue'
	export default {
		components:{
			topicInfo,
			commonList,
			noThing,
			loadMore
		},
		data() {
			return {
				info:{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				hotList:[{
					title:"【新人必读】uni-app 实战1"
				},{
					title:"【新人必读】王者荣耀在线解读上分如如喝水升星如恰饭"
				}],
				tabIndex:0,
				tabBars:[{
					name:"默认"
				},
				{
					name:"最新"
				}],
				//默认
				list1:[],
				loadtext1:"上拉加载更多",
				//最新
				list2:[],
				loadtext2:"上拉加载更多",
				
			}
		},
		computed:{
			//当前列表数据
			listData(){
				if(this.tabIndex===0){
					return this.list1
				}
				return this.list2
			},
			//当前下拉加载
			loadtext(){
				
				if(this.tabIndex===0){
					return this.loadtext1
				}
				return this.loadtext2
			}
		},
		onLoad(e){
		
			if(e.detail){
				let res=JSON.parse(e.detail)
				console.log(res)
			}
			this.list1=demo
		},
		//触底事件
		onReachBottom(){
			this.loadmore()
			
		},
		methods: {
			//tab切换
			changeTab(index){
				this.tabIndex=index
			},
			//上拉加载更多
			loadmore(){
				
				//拿到当前列表
				let index = this.tabIndex
				//判断是否处于可加载状态
				if(this.loadtext !=='上拉加载更多')return;
				//设置上拉加载状态处于加载中
				this['loadtext'+(index+1)]='加载中...'
				//请求数据
				setTimeout(()=>{
					this['list'+(index+1)]=[...this['list'+(index+1)],...this['list'+(index+1)]]
					this['loadtext'+(index+1)]='上拉加载更多'
				},2000)
			},
			
		}
	}
</script>

<style>
.filter{
	filter: blur(10px);
}
</style>
